<script setup lang="ts">
import handlePopover from '@renderer/utils/handlePopover';

const props = defineProps<{
  waterproofFormItem: collectionItemModel[]
}>()
const { findPopoverContent } = handlePopover()
</script>

<template>
  <el-form :model="props.waterproofFormItem">
    <el-row :gutter="20">
      <template v-for="(item, index) in props.waterproofFormItem" :key="index">
        <el-col :span="8">
          <el-form-item :key="index" label-width="130">
            <template #label>
              <span @click="findPopoverContent(item.name)">{{ item.name + ':' }}</span>
            </template>
            <el-input v-model="item.value" type="number" @mousewheel.native.prevent placeholder="请输入" v-if="item.type == 1">
              <template #append>{{ item.unit }}</template>
            </el-input>
            <el-radio-group v-model="item.value" placement="row" v-else>
              <el-radio label="是" :value="1" :customStyle="{ marginRight: '35px' }" />
              <el-radio label="否" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #FF9600 !important;
}
.el-form-item {
  margin-bottom: 10px;
  margin-right: 20px !important;
  flex: 1;
  display: flex;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #FF9600 !important;
    border-color: #FF9600 !important;
}
</style>

